<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1,minimun-scale=1,user-scalable=no"/>
    <title>个人中心</title>
    <link rel='stylesheet' href="../css/comm.css"/>
    <link rel='stylesheet' href="../css/iconfont.css"/>
    <link rel='stylesheet' href="../css/per/per.css"/>
</head>
<body>
    <header class="bGDarkYellow">
        <header class="l-row lH45  cWhite edge-left-right">
            <div class="l-col-xs-1 right tR">
                <span class="iconfont icon-thin-r"></span>
            </div>
            <div class="l-col-xs-10 fS17 tC">
               个人中心
            </div>
            <div class="l-col-xs-1">
                <span class="iconfont icon-share"></span>
            </div>
        </header>
        <section class=" userMess tC">
            <img src="../img/avater.png" class="avaterImg">
            <p class="cWhite padd-t-5 padd-b-5 fS14">驾培网学员</p>
            <div class="mess l-row padd-5 boxShadow">
                <div class="l-col-xs-6 cDarkYellow">
                    <span>今天是你学车</span>
                    <p class="fS14">0天</p>
                </div>
                <div class="l-col-xs-6 cDarkYellow">
                    <span >你已经培训</span>
                    <p class="fS14">0 小时</p>
                </div>
            </div>
        </section>
    </header>
    <section class="bGWhite padd-t-20 l-row edge-left-right edge-distance boxShadow">
        <div class="l-col-xs-3 padd-t-10 fS14">当前进度：</div>
        <div class="l-col-xs-9 padd-t-20">
            <div class="progress">
                <p class="line"></p>
            </div>
            <div class="l-row padd-t-5 padd-b-10">
                <div class="l-col-xs-4">报名</div>
                <div  class="l-col-xs-4 tC">学习中</div>
                <div  class="l-col-xs-4 tR">科目1考试</div>
            </div>
        </div>
    </section>
    <section class="bGWhite boxShadow">
        <div class="l-row edge-left-right lH30 borderB">
            <p class="l-col-xs-6 fS14">进度跟踪：</p>
            <p class="l-col-xs-6 tR ">
                <span class="iconfont icon-thin-r down"></span>
            </p>
        </div>
        <ul class="edge-left-right">
            <li>
               <div class="circle-title fS13 lH25">
                   <i></i>
                   <p><span>1</span>您已成功提交报名信息，请尽快办理好如下材料：</p>
               </div>
                <div class="l-row">
                    <div class="l-col-xs-6 circle-sub  lH25">
                        <i></i>
                        <p>体检表</p>
                    </div>
                    <div class="l-col-xs-6 circle-sub lH25">
                        <i></i>
                        <p>白底1寸彩色照片4张</p>
                    </div>
                    <div class="l-col-xs-6 circle-sub lH25">
                        <i></i>
                        <p>居住证或居住登记证明 </p>
                    </div>
                    <div class="l-col-xs-6 circle-sub lH25">
                        <i></i><p>身份证复件正反两面</p>
                    </div>
                </div>
            </li>
            <li class="circle-title  fS13 lH25">
                <i></i>
                <p><span>2</span>没有以上所有材料，将不能参加科目1考试</p>
            </li>
            <li class="circle-title  fS13 lH25">
                <i></i>
                <p><span>3</span>可联系客服028-85632188咨询具体办事流程</p>
            </li>
        </ul>
        <div class="tC padd-t-15 padd-b-10">
            <div class="checkBox">
                <input type="checkbox" id="check">
                <label for="check"></label>
            </div>
            <span class="fS14">我已经准备好所有资料，请点击下一步</span>
        </div>
        <div class="tC padd-b-10">
            <button class="btn-br-yellow bR5 lH20 padd-l-20 padd-r-5 letter-space2 fS14 padd-b-5">立即报名 <span class="iconfont icon-cude-r"></span></button>
        </div>
    </section>
    <section class="l-row padd-t-10 padd-b-10 study-progress boxShadow">
        <div class="l-col-xs-3 padd-l-8 padd-r-8">
            <div class="bGWhite tC padd-t-5 padd-b-5 trainning boxShadow">
                <label class="bigger"></label>
                <p class="fS13 lH20">待培训</p>
            </div>
        </div>
        <div class="l-col-xs-3 padd-l-8 padd-r-8">
            <div class="bGWhite tC padd-t-5 padd-b-5 trained boxShadow">
                <label class="bigger"></label>
                <p class="fS13 lH20">已培训</p>
            </div>
        </div>
        <div class="l-col-xs-3 padd-l-8 padd-r-8">
            <div class="bGWhite tC padd-t-5 padd-b-5 waitRated boxShadow">
                <label class="bigger"></label>
                <p class="fS13 lH20">待评价</p>
            </div>
        </div>
        <div class="l-col-xs-3 padd-l-8 padd-r-8">
            <div class="bGWhite tC padd-t-5 padd-b-5 testMess boxShadow">
                <label class="bigger"></label>
                <p class="fS13 lH20">考试信息</p>
            </div>
        </div>
    </section>
    <div class="l-row padd-5 boxShadow bGWhite edge-distance">
        <div class="l-col-xs-6 coupon">
            <label class="biggest"></label>
            <div class="l-row padd-t-15 padd-b-10">
                <div class="l-col-xs-6 fS14">优惠券</div>
                <div class="l-col-xs-6 cDarkYellow">2张</div>
            </div>
        </div>
        <div class="l-col-xs-6 integral">
            <label class="biggest"></label>
            <div class="l-row padd-t-15 padd-b-10">
                <div class="l-col-xs-6 fS14">积分</div>
                <div class="l-col-xs-6 cDarkYellow">2张</div>
            </div>
        </div>
    </div>
    <section class="boxShadow bGWhite list padd-b-20">
        <ul>
            <li>
                <label class="small"></label>
                <div class="l-row lH45 borderB  padd-l-5 padd-r-10">
                    <div class="l-col-xs-9 fS13">
                        推荐朋友来学车
                    </div>
                    <div class="l-col-xs-3 tR">
                        <span class="iconfont icon-thin-r right"></span>
                    </div>
                </div>
            </li>
            <li>
                <label class="small"></label>
                <div class="l-row lH45 borderB  padd-l-5 padd-r-10">
                    <div class="l-col-xs-9 fS13">
                        培训预约
                    </div>
                    <div class="l-col-xs-3 tR">
                        <span class="iconfont icon-thin-r right"></span>
                    </div>
                </div>
            </li>
            <li>
                <label class="small"></label>
                <div class="l-row lH45 borderB  padd-l-5 padd-r-10">
                    <div class="l-col-xs-9 fS13">
                        科目二考前模拟
                    </div>
                    <div class="l-col-xs-3 tR">
                        <span class="iconfont icon-thin-r right"></span>
                    </div>
                </div>
            </li>
            <li>
                <label class="small"></label>
                <div class="l-row lH45 borderB  padd-l-5 padd-r-10">
                    <div class="l-col-xs-9 fS13">
                        预约考试
                    </div>
                    <div class="l-col-xs-3 tR">
                        <span class="iconfont icon-thin-r right"></span>
                    </div>
                </div>
            </li>
            <li>
                <label class="small"></label>
                <div class="l-row lH45 borderB  padd-l-5 padd-r-10">
                    <div class="l-col-xs-9 fS13">
                        我的分享
                    </div>
                    <div class="l-col-xs-3 tR">
                        <span class="iconfont icon-thin-r right"></span>
                    </div>
                </div>
            </li>
            <li>
                <label class="small"></label>
                <div class="l-row lH45 borderB  padd-l-5 padd-r-10">
                    <div class="l-col-xs-9 fS13">
                        我的客服
                    </div>
                    <div class="l-col-xs-3 tR">
                        <span class="iconfont icon-thin-r right"></span>
                    </div>
                </div>
            </li>
            <li>
                <label class="small"></label>
                <div class="l-row lH45 borderB  padd-l-5 padd-r-10">
                    <div class="l-col-xs-9 fS13">
                        账号与安全
                    </div>
                    <div class="l-col-xs-3 tR">
                        <span class="iconfont icon-thin-r right"></span>
                    </div>
                </div>
            </li>
            <li>
                <label class="small"></label>
                <div class="l-row lH45 borderB  padd-l-5 padd-r-10">
                    <div class="l-col-xs-9 fS13">
                        赚取学车币
                    </div>
                    <div class="l-col-xs-3 tR">
                        <span class="iconfont icon-thin-r right"></span>
                    </div>
                </div>
            </li>
        </ul>
    </section>
</body>
</html>